*{
	margin: 0;
	padding: 0;
}
html,body{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #1d2126;
}
#app{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
#desktop{
	position: relative;
	width: 100%;
	height: calc(100% - 46px);
	overflow: hidden;
	background-color: #3d355f;
}
#grid{
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-flow: column wrap;
	align-content: flex-start;
}
#grid .file-name{
	color: #fff;
	text-shadow: -1px 1px 0 #00000088;
}
#statusBar{
	width: 100%;
	height: 46px;
	background-color: #474f6188;
	display: flex;
}
.wd{
	position: absolute;
	left: 20px;
	top: 20px;
	background-color: #a2a2a2;
	display: flex;
	flex-flow: column nowrap;
	box-shadow: 0 0 6px #00000044;
	animation: jump-in .3s forwards;
	resize: both;
	overflow: auto;
	transform-origin: 50% 80%;
}
.confirm-wd{
	width: 300px;
	height: fit-content;
	left: 400px;
	top: 300px;
	resize: none;
	overflow: hidden;
}
.list-wd{
	width: 600px;
	height: 400px;
}
@keyframes jump-in{
	from{transform: scale(0);}
	to{transform: scale(1);}
}
.wd .top-bar{
	width: 100%;
	height: 28px;
	background-color: #687186;
	overflow: hidden;
	display: flex;
	justify-content: space-between;
}
.wd .title{
	/* float: left; */
	width: fit-content;
	height: 28px;
	padding-left: 10px;
	font-size: 14px;
	font-weight: lighter;
	line-height: 28px;
	color: #fff;
	white-space: nowrap;
	user-select: none;
	pointer-events: none;
	flex-shrink: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.wd.act .top-bar{
	background-color: #4a505f;
}
.wd .top-bar .btns{
	display: flex;
	/* float: right; */
}
.wd .top-bar .btn{
	width: 40px;
	height: 28px;
	transition: .2s;
	opacity: .4;
}
.wd .top-bar .btn:hover{
	background-color: #ffffff33;
	opacity: 1;
}
.wd .minisize{
	background: url(../icons/minisize.svg) no-repeat center;
}
.wd .resize{
	background: url(../icons/resize.svg) no-repeat center;
}
.wd .maxsize{
	background: url(../icons/maxsize.svg) no-repeat center;
}
.wd .close{
	background: url(../icons/close.svg) no-repeat center;
}
.wd .save{
	background: url(../icons/save.svg) no-repeat center;
}
.wd .back{
	background: url(../icons/back.svg) no-repeat center;
}
.wd .proceed{
	background: url(../icons/proceed.svg) no-repeat center;
}
.wd .top-bar .close:hover{
	background-color: #f40;
}
.wd .tools{
	position: relative;
	width: 100%;
	height: 28px;
	background-color: #fff;
	display: flex;
}
.wd .tools::before{
	position: absolute;
	content: "";
	left: 50%;
	bottom: 0;
	width: calc(100% - 20px);
	height: 1px;
	background-color: #f0f0f0;
	transform: translate(-50%,0);
}
.wd .tools .btns{
	display: flex;
}
.wd .tools .btn{
	width: 40px;
	height: 28px;
	transition: .2s;
	opacity: .4;
	cursor: pointer;
}
.wd .tools .btn-sp{
	width: 40px;
	height: 28px;
	opacity: .4;
}
.wd .tools .btn:hover{
	opacity: 1;
}
.wd .tools .functions{
	display: flex;
	box-sizing: border-box;
	padding-left: 10px;
}
.wd .tools .btn-sp.act{
	opacity: 1;
	cursor: pointer;
}
.wd .tools .fun{
	font-size: 12px;
	padding: 0 8px;
	line-height: 28px;
	height: 28px;
	transition: .3s;
	user-select: none;
}
.wd .tools .fun:hover{
	background-color: #eee;
}
.wd .content{
	display: block;
	width: 100%;
	height: calc(100% - 56px);
	background-color: #ffffff;
	overflow: auto;
	word-break: break-word;
	box-sizing: border-box;
	padding: 0 8px;
	font-size: 16px;
}
.txt-wd .content{
	border: none;
	outline: none;
	resize: none;
}
.confirm-wd .content{
	padding: 4px 10px 8px;
}
.list-wd .content{
	margin: 0 auto;
	display: flex;
	align-content: flex-start;
	flex-flow: row wrap;
}
.pc-wd .content{
	margin: 0 auto;
	display: flex;
	align-content: flex-start;
	flex-flow: row wrap;
}
.wd .confirm-text{
	padding: 6px 0 20px;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 2px;
	user-select: none;
}
.wd .sub-btns{
	width: fit-content;
	display: flex;
	margin: 0 auto;
}
.wd .sub-btns .btn{
	width: fit-content;
	height: 20px;
	line-height: 20px;
	border: 1px solid #999;
	margin: 4px 10px;
	padding: 0 18px;
	font-size: 12px;
	user-select: none;
	cursor: pointer;
}
.wd .sub-btns .btn:hover{
	background-color: #f0f0f0;
}
.wd .sub-btns .act{
	background-color: #4a505f;
	color: #fff;
}
.wd .sub-btns .act:hover{
	background-color: #3d434f;
}
.file{
	width: 80px;
	height: 100px;
	margin: 4px;
}
.selected{
	background-color: #3da5ff22;
}
.selected-dark{
	background-color: #00000033;
}
.file .file-icon{
	width: 80px;
	height: 80px;
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
}
.file .file-name{
	width: 100%;
	word-break: break-all;
	font-size: 14px;
	color: #666;
	text-align: center;
	user-select: none;
}
.file .file-name.inline{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.file .file-name-input{
	width: 100%;
	outline: none;
}
.file-icon.pc{
	background-image: url(../icons/pc.svg);
	background-size: 70%;
}
.file-icon.disk{
	background-image: url(../icons/disk.svg);
	background-size: 70%;
}
.file-icon.list{
	background-image: url(../icons/list.svg);
}
.file-icon.txt{
	background-image: url(../icons/txt.svg);
	background-size: 80%;
}
.file-icon.unknown{
	background-image: url(../icons/unknown.svg);
	background-size: 80%;
}
#context-menu-area{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1000;
}
.context-menu{
	position: absolute;
	left: 200px;
	top: 200px;
	min-width: 200px;
	background-color: #f4f4f4;
	box-shadow: -4px 4px 4px -1px #00000022;
	padding: 4px 0px;
	font-size: 14px;
	color: #2c3b5e;
	border: 1px solid #4a6899;
	border-radius: 4px;
	display: none;
	animation: fade-in .2s forwards;
}
@keyframes fade-in{
	from{opacity: 0;}
	to{opacity: 1;}
}
.root-menu{
	display: block;
}
.context-menu.sub{
	left: 99%;
	top: 0;
}
.menu-item{
	position: relative;
	width: 100%;
	height: 28px;
	line-height: 28px;
	box-sizing: border-box;
	padding: 0 8px;
	user-select: none;
	text-indent: 20px;
}
.menu-item::before{
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%,0);
	width: calc(100% - 20px);
	height: 1px;
	background-color: #cfd6da;
}
.menu-item:hover{
	background-color: #fff;
}
.menu-item:last-child::before{
	background-color: transparent;
}
.menu-item:hover>.context-menu{
	display: block;
}
.menu-item.has-ch::after{
	content: "";
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translate(0,-50%);
	width: 10px;
	height: 10px;
	background: url(../icons/right.svg) no-repeat center;
	background-size: 20px;
	opacity: .4;
}
.menu-item:hover.has-ch::after{
	opacity: 1;
}
.start{
	width: 46px;
	height: 46px;
	background: url(../icons/windows.svg) no-repeat center;
	background-size: 28px !important;
}
#tasks{
	flex: 1;
	display: flex;
}
.task-icon{
	position: relative;
	width: 60px;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 40px;
	transition: .2s;
}
.task-icon.act{
	background-color: #ffffff33;
}
.task-icon:hover{
	background-color: #ffffff44;
}
.task-icon.running::before{
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 90%;
	height: 2px;
	transform: translateX(-50%);
	background-color: #72b8ff;
}
.task-icon.list{
	background-image: url(../icons/list.svg);
}
.task-icon.txt{
	background-image: url(../icons/txt.svg);
	background-size: 30px;
}
.task-icon.confirm{
	background-image: url(../icons/confirm.svg);
	background-size: 30px;
}
#clock{
	width: 100px;
	height: 100%;
	background-color: #00000044;
	font-size: 12px;
	color: #fff;
	text-align: center;
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
}